<template>
  <view class="goods_wrap">
    <scroll-view scroll-y class="goods_page">
      <div class="swiper-container">
        <u-swiper :list="banner" :border-radius="0" :height="750"></u-swiper>
      </div>

      <!-- 限时抢购和拼团 -->
      <view v-if="list.goodsStatus == 2" class="border-radus-card bg-fff">
        <div class="time-limit row cont-center border-radus-top">
          <image src="https://app.zbzedu.com/static/WaChat/img/time_limit._bg.png" class="active_img border-radus-top"></image>
          <div class="pd_l_30 flex-1" style="z-index: 1">
            <div v-if="list.goodsStatus == 2 && list.panicBuyDiscountModel == 2" class="font-36 col-fff font-b">¥<span class="font-60">{{discountsPrice}}</span><span v-if="smallNumShow"></span></div>
            <div v-if="list.goodsStatus == 2 && list.panicBuyDiscountModel == 1" class="font-36 col-fff font-b">¥<span class="font-60">{{fixedPrice}}</span><span v-if="smallNumShow"></span></div>
            <div v-if="list.goodsStatus == 3" class="font-36 col-fff font-b">¥<span class="font-60">{{activityGoodsStandards.price}}</span></div>
            <div class="row cont-center" style="z-index: 1">
              <div class="font-20 col-fff bg-FF6251 pd_l_10 pd_r_10">原价</div>
              <div class="font-20 col-1f476d bg-fff pd_l_10 pd_r_10" style="margin-right: 10upx;">¥{{activityGoodsStandards.price}}</div>
            </div>
          </div>
          <div class="pd_r_20" style="z-index: 1;">
            <div class="row cont-center pd_b_20 jright">
              <div class="text-style pd_r_10"><img src="https://app.zbzedu.com/static/WaChat/img/xs_text.png" /></div>
              <div class="font-24 col-1f476d">活动倒计时</div>
            </div>
            <div class="font-20 col-fff count-down1 text-cent">
              <text class="count-down-frame">{{day}}</text>
              天<text class="count-down-frame">{{hour}}</text>
              时<text class="count-down-frame">{{minute}}</text>
              分<text class="count-down-frame">{{seconds}}</text>秒
            </div>
          </div>
        </div>
        <div class="font-32 font-b u-p-l-36 u-p-t-18 u-p-b-18">{{list.goodsName}}</div>
      </view>

      <view v-if="list.goodsStatus == 3" class="border-radus-card bg-fff">
        <div v-if="list.goodsStatus == 3" class="time-limit row cont-center border-radus-top">
        <image src="https://app.zbzedu.com/static/WaChat/img/time_limit._bg.png" class="active_img border-radus-top"></image>
        <div class="pd_l_30 flex-1" style="z-index: 1">
          <!-- <div class="font-36 col-fff font-b">¥<span class="font-60">{{activityGoodsStandards.price}}</span><span>.00</span></div> -->
          <div class="font-36 col-fff font-b"  style="z-index: 1">¥<span class="font-60">{{groupPrice}}</span><span v-if="smallNumShow"></span></div>
          <div class="row cont-center" style="z-index: 1">
            <div class="font-20 col-fff bg-FF6251 pd_l_10 pd_r_10">可邀请{{activityList.groupBuyMax}}人</div>
          </div>
        </div>
        <div class="pd_r_10" style="z-index: 1">
          <!-- <div class="font-30 font-b col-FF6251 text-right pd_b_20">拼团活动</div> -->
          <div class="row jright pd_b_20" style="z-index: 1">
            <div class="text-style"><img src="https://app.zbzedu.com/static/WaChat/img/pt_text.png" /></div>
          </div>
          <div class="spell font-20 col-fff text-cent" style="z-index: 1">邀请多人参与购买 最高可返{{topReturnMoney}}元</div>
        </div>
      </div>
        <div class="font-32 font-b u-p-l-36 u-p-t-18 u-p-b-18">{{list.goodsName}}</div>
      </view>
      <!--标题-->
      <div class="bg-fff u-p-20 border-radus-card" v-if="list.goodsStatus == 1">
        <div class="font-36 font-b col-1f476d pd_b_10" style="color: #245482">¥<span class="font-60">{{list.standards[0].price}}</span></div>
        <!-- <div v-if="list.goodsStatus == 1" class="font-36 font-b col-1f476d pd_b_10">¥<span class="font-60">{{price}}</span><span v-if="smallNumShow"></span></div> -->
        <div class="font-32 font-b">{{list.goodsName}}</div>
      </div>
      <!--选择按钮-->
<!--      <div class="bg-fff pd_l_30 pd_r_30 mg_t_10 border-radus-card">
        <div v-if="list.goodsStatus == 1" class="row cont-center pd_t_30 pd_b_30 yh_bd_bottom" @click="popup">
          <div class="font-28 col-333 flex-1">商品规格</div>
          <div class="font-28 col-666 pd_r_10">请选择</div>
          <u-icon name="arrow-right" size="30" color="#999"></u-icon>
        </div>
        <div v-if="list.goodsStatus == 2 || list.goodsStatus == 3" class="row cont-center pd_t_30 pd_b_30 yh_bd_bottom" @click="activityPopup">
          <div class="font-28 col-333 flex-1">商品规格</div>
          <div class="font-28 col-666 pd_r_10">请选择</div>
          <u-icon name="arrow-right" size="30" color="#999"></u-icon>
        </div>
        <div v-if="list.goodsStatus == 3" class="row cont-center pd_t_30 pd_b_30 yh_bd_bottom" @click="spellPopup">
          <div class="font-28 col-333 flex-1">拼团规则</div>
          <div class="font-28 col-666 pd_r_10">立即查看</div>
          <u-icon name="arrow-right" size="30" color="#999"></u-icon>
        </div>
        <div class="row cont-center pd_t_30 pd_b_30" @click="agreementPopup">
          <div class="font-28 col-333 flex-1">购买协议</div>
          <div class="font-28 col-666 pd_r_10">立即查看</div>
          <u-icon name="arrow-right" size="30" color="#999"></u-icon>
        </div>
      </div>-->
      <!--评价-->
      <div class="bg-fff u-p-20 mg_t_10 border-radus-card" style="padding-left: 0!important;">
        <view class="u-flex u-m-b-40 u-row-between">
          <view class="u-font-32 font-b color-333 u-p-l-30">商品评价</view>
          <navigator :url="`/package/comment/list?id=${list.id}&type=goods`" class="color-active u-font-28 u-flex u-center">
            <view style="color: #245482">查看全部</view>
            <u-icon :name="require('../../static/icon/arrow-right.png')" size="28" class="u-m-l-10"></u-icon>
          </navigator>
        </view>
        <evaList :list="evaLists" type="goods" @like-change="res => evaLists = res"></evaList>
      </div>
      <!--商品详情-->
      <div class="bg-fff u-p-l-20 pd_r_20 mg_t_10 pd_t_50 col-666 border-radus-card">
        <view class="u-font-32 font-b u-m-b-20 color-333">商品详情</view>
        <u-parse :html="list.goodsContent"></u-parse>
      </div>
    </scroll-view>
    <!--正常购买规格弹窗-->
    <u-popup v-model="popupShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45">
        <div class="row cont-center yh_bd_bottom pd_b_30">
          <div class="left-img">
            <img v-for="(item,index) in banner" :key="index" v-if="index==0" :src="item" />
          </div>
          <div class="pd_l_30">
            <div class="font-28 font-b col-333 pd_b_30">{{list.goodsName}}</div>
            <div class="font-24 col-999 pd_b_45">规格：{{list.standards[currentSort].desc}}</div>
            <div class="font-28 font-b col-1f476d">￥{{list.standards[currentSort].price}}</div>
          </div>
        </div>
        <div class="font-28 col-666 pd_t_30">规格</div>
        <div class="row cont-center pd_t_30 pd_b_70 u-flex-wrap">
          <div v-for="(item,index) in list.standards" :key="index" class="specs font-24 col-333 text-cent bg-F5F5F5 mg_r_20"
               :class="{'active':currentSort == index}" @click="active(index)">
            <span>{{item.desc}}</span>
          </div>
        </div>
        <div style="width: 100% !important;" class="user-btn text-cent col-fff font-26 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="openWindow(list, list.standards[currentSort])">立即购买</u-button>
        </div>
      </div>
    </u-popup>
    <!--活动购买弹窗-->
    <u-popup v-model="activityPopupShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45">
        <div class="row cont-center yh_bd_bottom pd_b_30">
          <div class="left-img">
            <img v-for="(item,index) in banner" :key="index" v-if="index==0" :src="item" />
          </div>
          <div class="pd_l_30">
            <div class="font-28 font-b col-333 pd_b_30">{{list.goodsName}}</div>
            <div class="font-24 col-999 pd_b_45">规格：{{activityList.activityGoodsStandards[currentSort].desc}}</div>
            <div v-if="list.goodsStatus == 2 && list.panicBuyDiscountModel == 2" class="font-28 font-b col-1f476d">￥{{activityList.activityGoodsStandards[currentSort].discountsPrice}}</div>
            <div v-if="list.goodsStatus == 2 && list.panicBuyDiscountModel == 1" class="font-28 font-b col-1f476d">￥{{activityList.activityGoodsStandards[currentSort].fixedPrice}}</div>
            <div v-if="list.goodsStatus != 2" class="font-28 font-b col-1f476d">￥{{activityList.activityGoodsStandards[currentSort].price}}</div>
          </div>
        </div>
        <div class="font-28 col-666 pd_t_30">规格</div>
        <div class="row cont-center pd_t_30 pd_b_70 u-flex-wrap">
          <div v-for="(item,index) in activityList.activityGoodsStandards" :key="index" class="specs font-24 col-333 text-cent bg-F5F5F5 mg_r_20" :class="{'active':currentSort == index}" @click="active(index)">
            <span>{{item.desc}}</span>
          </div>
        </div>
        <div style="width: 100% !important;" class="user-btn text-cent col-fff font-26 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="openWindow(list, activityList.activityGoodsStandards[currentSort])">{{list.goodsStatus == 3 ? '立即开团' : '立即购买'}}</u-button>
        </div>
      </div>
    </u-popup>
    <!--购买协议-->
    <u-popup v-model="agreementPopupShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45" style="height: 770upx">
        <div class="font-28 font-b pd_b_45 text-cent">购买协议</div>
        <div style="overflow: scroll;height: 530upx;" class="font-26 col-666 pd_b_70">
          <u-parse :html="list.goodsAgreement"></u-parse>
        </div>
        <div class="confirm-btn text-cent col-fff font-26 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="agreementPopupHide">确定</u-button>
        </div>
      </div>
    </u-popup>

    <!--拼团规则-->
    <u-popup v-model="spellShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45" style="height: 7.7rem;">
        <div class="font-28 font-b pd_b_45 text-cent">拼团规则</div>
        <div style="overflow: scroll;height: 530upx;" class="font-26 col-666 pd_b_70">
          <u-parse :html="activityList.groupBuyDesc"></u-parse>
        </div>
        <div class="confirm-btn text-cent col-fff font-26 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="spellPopupHide">确定</u-button>
        </div>
      </div>
    </u-popup>

    <!--底部按钮-->
    <div class="bg-fff btn-container pd_t_19 pd_b_20 row cont-center">
<!--      <view open-type="concat" class="o_btn">

      </view>-->
      <u-button type="primary" :custom-style="customStyle1"
                open-type="contact"
                shape="circle">
        <view>
          <u-icon name="account" size="40" color="#1f476d"></u-icon>
        </view>
        <view class="font-24 color-666">在线客服</view>
      </u-button>
      <view class="flex-1">
        <div v-if="list.goodsStatus == 1" class="user-btn text-cent col-fff font-30 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="popup">立即购买</u-button>
        </div>
        <div v-if="list.goodsStatus == 2 || list.goodsStatus == 3" class="user-btn text-cent col-fff font-30 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="activityPopup">{{list.goodsStatus == 3 ? '立即开团' : '立即购买'}}</u-button>
        </div>
      </view>
    </div>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import evaList from "../../components/evaList";

  export default {
    components: {
      evaList
    },

    data() {
      return {
        customStyle: {
          background: '#1f476d',
          padding: '0 30rpx',
          color: '#fff'
        },
        customStyle1: {
          background: 'transparent',
          color: '#fff',
          flexDirection: 'column',
          lineHeight: '15px'
        },
        banner: [],
        activityGoodsStandards: {},
        list: {},
        activityList: {},
        popupShow: false,
        agreementPopupShow: false,
        spellShow: false,
        activityPopupShow: false,
        currentSort: 0,
        day: 0,
        hour: 0,
        minute: 0,
        seconds: 0,
        timeText: '0天0分0秒0',
        topReturnMoney: '',
        discountsPrice: '',
        groupPrice: '',
        price: '',
        smallNumShow: false,
        fixedPrice: '',
        evaLists: [],
        goodsId: ''
      }
    },

    computed: {
      video_height() {
        let info = uni.getSystemInfoSync()
        let width = info.screenWidth
        let video_width = width - uni.upx2px(26*2)
        return video_width * (9/16)
      }
    },

    onLoad(option) {
      this.goodsId = option.id
	  if(this.goodsId=="" ||this.goodsId==null){
		  this.goodsId=20
	  }
    },

    onShow() {
      // 获取评论数据
      this.getDetail(this.goodsId)
    },

    methods: {
      getDetail(id) {
        request({
          url: '/app/goods/goodsDetail?id=' + id
        }).then(ret => {
          var goodsCover = ret.data.goodsCovers
          this.list = ret.data
          this.evaLists = ret.data.goodsEvaList
          this.banner = goodsCover;
          if (this.list.activityId) {
            this.getDetailActivity(this.list.activityId);
          }
          this.price = ret.data.standards[0].price;
        })
      },

      getDetailActivity(id) {
        var that_ = this;
        request({
          url: '/app/goods/timeLimitBuy',
          data: {
            activityId: id
          }
        }).then(ret => {
          that_.activityList = ret.data;
          that_.activityGoodsStandards = ret.data.activityGoodsStandards[0];
          that_.discountsPrice = ret.data.activityGoodsStandards[0].discountsPrice;
          that_.fixedPrice = ret.data.activityGoodsStandards[0].fixedPrice;
          that_.groupPrice = ret.data.activityGoodsStandards[0].price;
          that_.topReturnMoney = ret.data.topReturnMoney;
          that_.timeOut(ret.data.activityStart,ret.data.activityEndTimestamp)
        })
      },

      timeOut(start,now) {
        var that_ = this;
        var nowtime = Number((now+'000'))
        if (nowtime < new Date()) {
          that_.day= 0;
          that_.hour= 0;
          that_.minute= 0;
          that_.seconds= 0;
          return nowtime;
        }
        setInterval(function() {
          var starttime = new Date();
          var time = nowtime - starttime;
          var day = parseInt(time / 1000 / 60 / 60 / 24);
          var hour = parseInt(time / 1000 / 60 / 60 % 24);
          var minute = parseInt(time / 1000 / 60 % 60);
          var seconds = parseInt(time / 1000 % 60);
          that_.day= day;
          that_.hour= hour;
          that_.minute= minute;
          that_.seconds= seconds;
        }, 1000);
      },

      popup() {
        this.popupShow = true;
      },

      agreementPopup() {
        this.agreementPopupShow = true;
      },

      agreementPopupHide() {
        this.agreementPopupShow = false;
      },

      spellPopup() {
        this.spellShow = true;
      },

      spellPopupHide() {
        this.spellShow = false;
      },

      activityPopup() {
        this.activityPopupShow = true;
      },

      active(index, val) {
        this.currentSort = index;
      },

      openWindow(list,current) {
        setTimeout(() => {
          uni.$emit('new_order', {
            list: list,
            current: current,
            title: '1'
          })
        }, 300)

        this.$u.route({
          url: '/package/goods/new_order'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .border-radus-top {
    border-radius: 28upx 28upx 0 0;
  }
  .border-radus-card {
    border-radius: 28upx;
    width: 95%;
    margin: 30upx auto;
  }
  .bg-F5F5F5 {
    background: #f5f5f5;
  }
  .pd_b_70 {
    padding-bottom: 70upx;
  }
  .goods_wrap {
    display: flex;
    flex-direction: column;
    height: 100%;

    .specs {
      min-width: 224upx;
      height: 60upx;
      line-height: 60upx;
      margin-bottom: 10upx;
      padding-left: 10rpx;
      padding-right: 10rpx;
    }
    .active {
      background: #FFF7F5 !important;
      color: #2A6AAA !important;
      border: 1px solid #2A6AAA;
    }

    .popup-container {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
    }
    .left-img {
      width: 180upx;
      height: 180upx;
    }

    .left-img image {
      width: 100%;
      height: 100%;
    }
  }
  .goods_page {
    background: #f7f7f7;
    flex: 1;
    padding-bottom: 120upx;
  }
  .btn-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 30upx;
    padding-right: 30upx;
    box-shadow: 1px 8px 16px 0px rgba(0, 0, 0, 0.47);
    .o_btn {
      width: 180upx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
  }
  .time-limit {
    width: 100%;
    height: 136upx;
    position: relative;
  }
  .text-style {
    width: 132upx;
    height: 28upx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .count-down1 {
    font-size: 12px;
    width: 302upx;
    height: 36upx;
    line-height: 36upx;
    /* padding: 0.05rem 0.15rem; */
    background-color: #F3B880;
    border-radius: 18upx;
  }
  .active_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .spell{
    min-width: 320upx;
    height: 36upx;
    line-height: 36upx;
    background-color: #FE642C;
    border-radius: 18upx;
  }
</style>
